<template>

  <el-row :gutter="10" style="height:calc(100% - 10px)">

    <el-col :span="12" style="height:100%;">
      <div style="height: 100% ;display: flex;flex-direction: column;">
        <!-- <dv-charts :option="option1" style="height: 400px;" />
            <dv-charts :option="option1" style="height: 400px;" /> -->
        <div style="flex: 1;">
          <dv-border-box-8 :color="['#025d6d']">
            <div style="height:100%;" ref="echarts1"> </div>
          </dv-border-box-8>
        </div>
        <div style="flex: 1;position: relative;">
          <dv-border-box-8 :color="['#025d6d']" style="flex: 1;">
            <div style="height:100%;" ref="echarts2"> </div>
          </dv-border-box-8>

          <el-select v-model="zoneName" placeholder="请选择" size="mini" multiple collapse-tags
            style="position: absolute;top: 40px;right: 60px;width: 150px;" @change="onZoneChanged">
            <el-option v-for="item in zoneList" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </div>
      </div>
    </el-col>
    <el-col :span="12" style="height:100%">
      <div style="display: flex;flex-direction: column;height: 100%;">

        <div style="flex: 1;overflow-y: hidden;">
          <dv-border-box-10>
            <el-table :data="tableData"
              style="width: 100%;overflow-y: auto;height: calc(100%  - 45px);"
              :header-row-style="{fontSize:'17px',color:'white'}"
              :row-style="{fontSize:'15px',color:'white'}" border>

              <el-table-column prop="compName" label="企业名称" align="center" min-width="180px">
              </el-table-column>
              <el-table-column prop="totalNum" label="总人数" align="center" min-width="120px">
              </el-table-column>
              <el-table-column prop="signNum" label="签署人数" align="center" min-width="120px">
              </el-table-column>
              <el-table-column prop="signRate" label="签署率" align="center" min-width="120px">
              </el-table-column>

            </el-table>
          </dv-border-box-10>
        </div>

      </div>
    </el-col>
  </el-row>

</template>
<script>
// import Charts from '@jiaminghi/charts';
import pieOption1 from './charts/pie1';
import barOption2 from './charts/bar2';
import { queryLetSignList } from '@/service/letSign';

export default {
  components: {},
  data() {
    return {
      loading: true,
      tableData: [],
      option1: {},
      zoneName: ['1#地块'],
      zoneList: [
        { label: '1#地块', value: '1#地块' },
        { label: '2#地块', value: '2#地块' },
        { label: '3#地块', value: '3#地块' },
        { label: '4#地块', value: '4#地块' },
        { label: '5#地块', value: '5#地块' },
        { label: '6#地块', value: '6#地块' },
        { label: '7#地块', value: '7#地块' },
      ],
    };
  },
  methods: {
    initCharts() {
      // const container = document.getElementById('container1');
      this.myChart = this.$echarts.init(this.$refs.echarts1);

      this.myChart1 = this.$echarts.init(this.$refs.echarts2);
      window.onresize = function () {
        //自适应大小
        this.myChart.resize();
        this.myChart1.resize();
      };
    },

    toPoint(percent) {
      if (!percent) {
        return 0;
      }
      var str = percent.replace('%', '');
      return parseFloat(str);
    },

    loadPieCharts() {
      let count1 = this.tableData.filter(
        (item) => this.toPoint(item.signRate) == 100
      ).length;
      let count2 = this.tableData.filter(
        (item) =>
          this.toPoint(item.signRate) >= 90 && this.toPoint(item.signRate) < 100
      ).length;
      let count3 = this.tableData.filter(
        (item) =>
          this.toPoint(item.signRate) >= 80 && this.toPoint(item.signRate) < 90
      ).length;
      let count4 = this.tableData.filter(
        (item) =>
          this.toPoint(item.signRate) >= 70 && this.toPoint(item.signRate) < 80
      ).length;
      let count5 = this.tableData.filter(
        (item) => this.toPoint(item.signRate) < 70
      ).length;
      //占比
      let dataList = [count1, count2, count3, count4, count5];
      pieOption1.series[0].data.forEach((item, index) => {
        item.value = dataList[index];
      });

      this.myChart.setOption(pieOption1);
    },
    onZoneChanged(val) {
      this.zoneName = val;
      this.loadBarCharts();
    },
    loadBarCharts() {
      const scoreData = this.tableData.filter(
        (item) => this.zoneName.indexOf(item.zoneNo) >= 0
      );
      barOption2.xAxis[0].data = scoreData.map((item) => item.companyShort);
      barOption2.series[0].data = scoreData.map((item) => item.signNum);
      barOption2.series[1].data = scoreData.map(
        (item) => item.totalNum - item.signNum
      );

      barOption2.series[2].data = scoreData.map((item) => {
        return parseFloat(this.toPoint(item.signRate).toFixed(1));
      });

      console.log('barOption2', barOption2.series[2].data);
      this.myChart1.setOption(barOption2);
    },

    async loadTable() {
      const res = await queryLetSignList({});
      if (res.dataList) {
        this.tableData = res.dataList;

        this.loadPieCharts();
        this.loadBarCharts();
      }
    },
  },

  mounted() {
    const vm = this;
    setTimeout(() => {
      this.loading = false;
    }, 500);
    this.initCharts();
    this.loadTable();
  },
};
</script>
<style scoped>
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td,
::v-deep .el-table th.el-table__cell {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  /* border-bottom: 0; */
}

::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}
::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table .cell {
  padding-left: 1px;
  padding-right: 1px;
}

::v-deep .el-select .el-input__inner {
  background-color: transparent;
  color: white;
}
::v-deep .el-select__tags .el-tag {
  background-color: transparent;
  color: white;
}

.user_skills {
  width: 50%;
  margin: auto;
}

.user_skills /deep/ .el-table--fit {
  padding: 20px;
}

.user_skills /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table tr {
  background-color: transparent !important;
}

.user_skills /deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.full_screen > .border-box-content {
  padding-top: 45px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}
</style>